<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
            <div class="container">
                <div class="form-group">
                  <label for="exampleInputEmail1" >姓名</label>
                  <input type="text" class="form-control"  placeholder="姓名" v-model="name">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1" >电话</label>
                  <input type="text" class="form-control"  placeholder="电话" v-model="tel">
                </div>
                <button v-show="tag" class="btn btn-info" @click="_click">添加</button>
                <button v-show="!tag" class="btn btn-success" @click="update2">修改</button>
                <button class="btn btn-warning" @click="_replace">重置</button>
                <table class="table table-bordered ">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>电话</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(item,index) in arr" >
                        <td>{{ index+1 }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.tel }}</td>
                        <td v-if="arr.length>=1 ">
                            <button class="btn btn-danger" @click="_delete(index)">删除</button> 
                            <button  class="btn btn-warning" @click="update1(index)">修改</button> 
                        </td>
                    </tr>
                    <tr v-if="arr.length>=1 ">
                        <td colspan="4"> <button class="btn btn-danger" @click="_deleteAll">删除全部 </button> </td>
                    </tr>
                    <tr v-if="arr.length<1 ">
                        <td colspan="4"> 暂无数据！</td>
                    </tr>
                  </table>
            </div>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                name:"",
                tel:"",
                arr:[],
                i:1,
                // 切换注册、修改按钮
                tag:true,
                index:0,
            },
            methods:{
                _click(){
                    if(this.name=="" || this.tel==""){
                        alert("用户名或电话不能为空");
                    }else{
                         this.arr.push( {id:this.i++,name:this.name,tel:this.tel})
                         this.name='';
                         this.tel='';
                    }
                },
                _replace(){
                    this.name='';
                    this.tel='';
                },
                _delete(index,e){
                   this.arr.splice(index,1);
                    
                },
                update1(index){
                   this.tag=false;
                   this.index=index;
                   this.name=this.arr[index].name;
                   this.tel=this.arr[index].tel;
                },
                update2(){
                    this.arr[this.index].name=this.name;
                    this.arr[this.index].tel=this.tel;
                    this.name='';
                    this.tel='';
                    this.tag=true;
                },
                _deleteAll(){
                    this.i=1;
                    this.arr=[];
                    this.name='';
                    this.tel='';
                    this.tag=true;
                }
            }
        })
    </script>
</html>